<template>
    <div id="bigbox">
        <div id="topbox">
            <button @click="tian" id="btn">+添加</button>
        </div>
        <div id="middlebox">
            <template v-for="item in asd">
                <div id="one">
                    <div id="shuju1">{{item.countryName}}</div>
                    <div id="shuju2" v-for="items in item.brands">
                        {{items.brandName}}
                    </div>
                    <div id="shuju3">
                        <div @click="bbb(item)" id="btn1">修改</div>
                        <div @click="aaa(item)" id="btn2">删除</div>
                    </div>
                </div>
            </template>
        </div>
        <div class="foot">
            <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                :page-size="pageSize"
                :page-count="total"
                @current-change="pageChange"/>
        </div>
        <el-dialog v-model="centerDialogVisible" width="450" align-center>
            <div id="shan">删除</div>
            <div class="liebiao1">
                国家名称：<input type="text">
            </div>
            <div v-for="item in asd1" class="liebiao2">
                品牌名称：<input type="text" v-model="item.brandName">
                <button @click="dange(item)" id="sc">删除</button>
            </div>
            <div id="box8">
                <button class="btn3">保存</button>
                <button class="btn4">取消</button>
                <button @click="quanbu(item)" class="btn5">删除整个分类</button>
            </div>
        </el-dialog>
        <el-dialog v-model="tianjiamotaikuang" width="450" align-center>
            <div id="shan">添加国家</div>
            <div class="liebiao1">
                国家名称：<input id="guojia123" type="text">
            </div>
            <div v-for="item in asdqwe" class="liebiao2">
                品牌名称:<input id="pinpai123" v-model="item.brandName" type="text">
                <button @click="zxc" class="anniu">+</button>
            </div>
            <div id="box8">
                <button @click="shijian12" class="btn6">保存</button>
                <button class="btn7">取消</button>
            </div>
        </el-dialog>
        <el-dialog v-model="xiugaimotaikuang" width="450" align-center>
            <div id="shan">修改</div>
            <div class="liebiao1">
                国家名称：<input id="guojia123" v-model="asd10.countryName" type="text">
            </div>
            <div v-for="item in asd88" class="liebiao2">
                品牌名称：<input @change="xiaohu(item)" type="text" v-model="item.brandName">
                <button @click="kongbu" id="sc">+</button>
            </div>
            <div id="box8">
                <button @click="shijian88" class="btn6">保存</button>
                <button class="btn7">取消</button>
            </div>
        </el-dialog>
    </div>
</template>
<style scoped>
    .btn6{
        width:20%;
        height:40px;
        border-radius: 10px;
        margin-left:20%;
        background-color: #5981E1;
        color: #fff;
    }
    .btn7{
        width:20%;
        height:40px;
        border-radius: 10px;
        margin-left:20%;
        background-color: #ccc;
        color: #fff;
    }
    .anniu{
        width:20px;
        height:21px;
        text-align: center;
        line-height: 20px;
    }
    .btn3{
        width:20%;
        height:40px;
        border-radius: 10px;
        margin-left:5%;
        background-color: #5981E1;
        color: #fff;
    }
    .btn4{
        width:20%;
        height:40px;
        border-radius: 10px;
        margin-left:5%;
        background-color: #ccc;
        color: #fff;
    }
    .btn5{
        width:40%;
        height:40px;
        border-radius: 10px;
        margin-left:5%;
        background-color: #ccc;
        color: #fff;
    }
    #box8{
        width:100%;
        height:200px;
        line-height:200px;
    }
    #sc{
        margin-left:2%;
        color:red;
    }
    #bigbox{
        width:100%;
        height:100%;
        background-color: #F5F5F5;
    }
    #topbox{
        width:90%;
        height:80px;
        margin-left:5%;
        line-height:80px;
    }
    #btn{
        width:10%;
        height:30px;
        background-color: #5981E1;
        color: #fff;
        border-radius: 5px;
        margin-left:90%;
    }
    #middlebox{
        width:100%;
        height:495px;
        margin-left:50px;
    }
    #one{
        width:15%;
        height:200px;
        margin-top:1%;
        margin-left:20px;
        background-color: #fff;
        float:left;
        position: relative;
    }
    .foot{
        width: 78%;
        height: 10%;
        display: flex;
        justify-content: center;
        position: absolute;
        bottom: 20px;
    }
    .el-pagination{
        justify-content: center;
    }
    #shuju1{
        margin-top:10%;
        margin-left:10%;
        font-size:20px;

    }
    #shuju2{
        margin-left:10%;
        margin-top:1%;
        font-size:14px;
    }
    #shuju3{
        width:100%;
        height:40px;
        line-height:40px;
        position:absolute;
        bottom:0px;
    }
    #btn1{
        color:green;
        margin-left:70%;
        float:left;
        font-size:10px;
    }
    #btn2{
        color:red;
        margin-left:5%;
        float:left;
        font-size:10px;
    }
    #shan{
        width:100%;
        height:30px;
        text-align: center;
        line-height: 30px;
        font-size: 20px;
    }
    .liebiao1{
        margin-top:2%;
        margin-left:20%;
    }
    .liebiao2{
        margin-top:2%;
        margin-left:20%;
    }
</style>
<script setup>
    import {onMounted, ref} from "vue";
    import axios from 'axios';
    let centerDialogVisible = ref(false);
    let tianjiamotaikuang = ref(false);
    let xiugaimotaikuang = ref(false);
    let pageSize = 10;
    let currentPage = ref(1);
    let total = ref(1);
    var asd=ref([])
    var asd1=ref([])
    var asdqwe=ref([{}])
    var asd88=ref([])
    var asd99=ref([])
    var asd10=ref([])
    const pageChange = (newPage) => {
        currentPage.value = newPage;
        xuanran();
    };
    onMounted(()=>{
        xuanran()
    })
    function xiaohu(item){
        console.log(item);
        asd99.value.push(item)
    }
    function xuanran(){
        axios.defaults.headers.common['token'] = localStorage.getItem("token");
        axios.post(`http://192.168.199.11:8001/ShoppingStreet/country/countryList`,
        {
            pageIndex:currentPage.value,
            pageSize:pageSize,
        }).then(function(res){
            var qwe=res.data.data.countryList;
            console.log(qwe);
            asd.value=qwe;
            total=res.data.data.pageCount;
        })
    }
    let aaa =function(item){
        centerDialogVisible.value=true;
        console.log(item.brands);
        localStorage.setItem("countryName",item.countryName)
        console.log(item.countryId);
        localStorage.setItem("countryId",item.countryId);
        asd1.value=item.brands;
    }
    function quanbu(){
        axios.defaults.headers.common['token'] = localStorage.getItem("token");
        axios.post(`http://192.168.199.11:8001/ShoppingStreet/country/delete`,
        {
            countryId:Number(localStorage.getItem("countryId")),
            deflag:'1',
        }).then(function(res){
            console.log(res);
            centerDialogVisible.value=false;
            xuanran();
        })
    }
    function dange(item){
        axios.defaults.headers.common['token'] = localStorage.getItem("token");
        axios.post(`http://192.168.199.11:8001/ShoppingStreet/country/deleteByBrands`,
        {
            countryId:Number(localStorage.getItem("countryId")),
            deflag:'1',
            brandId:item.brandId,
        }).then(function(res){
            console.log(res);
            centerDialogVisible.value=false;
            xuanran();
        })
    }
    function tian(){
        tianjiamotaikuang.value=true;
    }
    function zxc(){
        asdqwe.value.push({brandName:""})
    }
    function shijian12(){
        console.log(asdqwe.value);
        console.log(guojia123.value);
        axios.defaults.headers.common['token'] = localStorage.getItem("token");
        axios.post(`http://192.168.199.11:8001/ShoppingStreet/country/addCountryBrands`,
        {
            countryName:guojia123.value,
            brandName:asdqwe.value,
        }).then(function(res){
            tianjiamotaikuang = false;
            console.log(res);
            xuanran();
        })
    }
    let bbb =function(item){
        xiugaimotaikuang.value=true;
        asd88.value=item.brands;
        asd10.value=item;
    }
    function shijian88(){
        console.log(asd10.value);
        axios.defaults.headers.common['token'] = localStorage.getItem("token");
        axios.post(`http://192.168.199.11:8001/ShoppingStreet/country/updateCountryBrands`,
        {
            countryName:asd10.value.countryName,
            countryId:Number(asd10.value.countryId),
            brandName:asd99.value,
        }).then(function(res){
            xiugaimotaikuang.value = false;
            console.log(res);
        })
        axios.defaults.headers.common['token'] = localStorage.getItem("token");
        axios.post(`http://192.168.199.11:8001/ShoppingStreet/country/updateAdd`,
        {
            countryName:guojia123.value,
            countryId:Number(asd10.value.countryId),
            brandName:asd99.value,
        }).then(function(res){
            console.log(res);
        })
    }
    function kongbu(){
        asd88.value.push({brandName:""})
    }
</script>